<template>
  <div class="MaterialList">
    <div class="top flex">
      <div class="top_left">
        <div class="statistics">
          <div class="titles flex">
            <div>物资统计</div>
            <div>{{ timeYMD }} 已更新</div>
          </div>
          <div class="factoryList flex">
            <div :class="item.name === current ? 'active' : ''" v-for="(item, index) in factoryList" :key="index"
              @click="current = item.name">
              <div class="icon"
                :style="{ background: 'url(' + require(`@/assets/images/救援物资/${index + 1}.png`) + ')' }" />
              <div class="box">
                <div>{{ item.name }}</div>
                <div><span>{{ item.count }}</span>个</div>
              </div>
            </div>
          </div>
        </div>
        <div class="count flex">
          <div>
            <div class="titles">物资类型</div>
            <div class="img"></div>
            <div class="chart" ref="typeChart"></div>
          </div>
          <div>
            <div class="titles">物资数量</div>
            <div class="charts" ref="countChart"></div>
          </div>
        </div>
      </div>
      <div class="top_right">
        <div class="titles">物资报废通知</div>
        <div class="scrapList">
          <div v-for="(item, index) in scrapList" :key="index" class="scrap">
            <div class="List">
              <div class="List_1 flex">
                <div>{{ item.物资名称 }}</div>
                <div>距离下次更换还剩：<span>{{ item.剩余天数 }}</span>天</div>
              </div>
              <div class="List_2 flex">
                <div>负责人：<span>{{ item.所属厂区 + ' - ' + item.负责人姓名 }}</span></div>
                <div>物资启用日期：<span>{{ item.物资开始日期 }}</span></div>
              </div>
              <div class="List_3 flex">
                <div class="bar">
                  <div class="bars" :style="{ width: item.百分比 + '%' }"></div>
                  <div class="block" :style="{ left: (item.百分比 - 1) + '%' }"></div>
                  <div class="days" :style="{ left: (item.百分比 - 5) + '%' }">
                    <span>{{ item.总天数 - item.剩余天数 }}</span> 天
                  </div>
                </div>
                <div class="count">{{ item.总天数 }}</div>
              </div>
            </div>
            <div class="Line" v-if="index !== scrapList.length - 1"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="titles">物资明细</div>
      <div class="table">
        <el-table :data="tableData" style="width:100%" height="365px">
          <el-table-column label="序号" width="60" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column v-for="item in tableList" :key="item.prop" :prop="item.prop" :label="item.label"
            :width="item.width" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import axios from "axios";
import * as echarts from 'echarts';

export default {
  name: "Post",
  data() {
    return {
      timeYMD: "",
      factoryList: [
        { name: "全厂物资总数", count: 0 },
        { name: "炼铁厂", count: 0 },
        { name: "炼钢厂", count: 0 },
        { name: "轧钢厂", count: 0 },
      ],
      current: "全厂物资总数",
      tableList: [
        { prop: "所属厂区", label: "所属厂区", width: "" },
        { prop: "物资类型", label: "物资类型", width: "" },
        { prop: "物资编号", label: "物资编号", width: "" },
        { prop: "物资名称", label: "物资名称", width: "200" },
        { prop: "物资规格", label: "物资规格", width: "" },
        { prop: "物资单位", label: "物资单位", width: "" },
        { prop: "物资数量", label: "物资数量", width: "" },
        { prop: "所在位置", label: "所在位置", width: "180" },
        { prop: "物资开始日期", label: "开始日期", width: "" },
        { prop: "物资报废日期", label: "报废日期", width: "" },
        { prop: "负责人姓名", label: "负责人姓名", width: "" },
        { prop: "负责人电话", label: "负责人电话", width: "" },
      ],
      tableData: [],
      scrapList: [],
    };
  },
  watch: {
    current: {
      handler(val) {
        if (val === "全厂物资总数") this.getChart()
        else this.getChart(val)
      },
      deep: true
    },
  },
  methods: {
    // 时间处理
    timeAction() {
      this.timeYMD = dayjs().format("YYYY-MM-DD HH : mm : ss"); // 初始化日期
      setInterval(() => {
        this.timeYMD = dayjs().format("YYYY-MM-DD HH : mm : ss"); // 初始化日期
      }, 1000);
    },
    async getList() {
      await axios.get(`http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjwz_tb_wzzl`)
        .then(res => {
          let data = res.data.data
          const factoryList = data.reduce((result, item) => {
            const factory = result.find(f => f.name === item.所属厂区);
            if (factory) {
              factory.count = item.物资数量;
            }
            return result;
          }, [
            { name: "全厂物资总数", count: 0 },
            { name: "炼铁厂", count: 0 },
            { name: "炼钢厂", count: 0 },
            { name: "轧钢厂", count: 0 }
          ]);

          // 计算总和   
          factoryList[0].count = factoryList.slice(1).reduce((sum, factory) => sum + factory.count, 0);
          this.factoryList = factoryList

        }).catch(err => {
          console.log(err);
        })
      await axios.get(`http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjwz_tb_wzbf`)
        .then(res => {
          let data = res.data.data
          const List = data.map(item => {
            const percentage = (((item.总天数 - item.剩余天数) / item.总天数) * 100).toFixed(2); // 保留4位小数
            return {
              ...item,
              "百分比": parseFloat(percentage) // 转换为数字类型
            };
          });
          this.scrapList = List
        }).catch(err => {
          console.log(err);
        })
      this.getChart()
    },
    async getChart(val) {
      let type = ""
      await axios.get(`http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjwz_tb_fc_wzlx?area=${val}`)
        .then(res => {
          type = res.data.data[0].物资类型
          this.PieChart(res.data.data, val, type)
        }).catch(err => {
          console.log(err);
        })
      this.clickChart(val, type)
    },
    PieChart(pieData, area, type) {
      const _that = this;
      let myChart = echarts.init(this.$refs.typeChart);
      myChart.off('click');
      var data = [];
      var color = ['#4D92FF', '#F6CA87', '#00E8F7',]
      var color1 = ['#0F233C', '#90764F', '#008891',]
      for (var i = 0; i < pieData.length; i++) {
        data.push(
          {
            value: pieData[i].数量,
            name: pieData[i].物资类型,
            itemStyle: {
              normal: {
                borderWidth: 6,
                shadowBlur: 2,
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: color[i]
                }, {
                  offset: 1,
                  color: color1[i]
                }]),
                shadowColor: '#000'
              }
            }
          },
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        );
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: ['70%', '75%'],
        center: ["45%", "42%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#0FF',
              fontSize: 15,
              formatter: function (params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < pieData.length; i++) {
                  total += pieData[i].数量;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== '') {
                  return percent + '%';
                } else {
                  return '';
                }
              },
            },
            labelLine: {
              length: 10,
              length2: 15,
              show: true,
            }
          }
        },
        data: data
      }];
      let option = {
        color: color,
        tooltip: {
          show: false
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          right: 0,
          bottom: 0,
          textStyle: {
            color: "#0FF",
            fontSize: 12,
          },
          itemWidth: 9,
          itemHeight: 9,
          itemGap: 25
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      myChart.setOption(option);
      myChart.on('click', function (params) {
        _that.clickChart(area, params.data.name)
      });
    },
    async clickChart(area, type) {
      await axios.get(`http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjwz_tb_fc_wzlx_zlmc?area=${area}&type=${type}`)
        .then(res => {
          this.BarChart(res.data.data, area, type);
          this.getTable(area, type, res.data.data[0].物资名称);
        }).catch(err => {
          console.log(err);
        })
    },
    BarChart(data, area, type) {
      const _that = this;
      let xData = []
      let yData = []
      data.forEach(item => {
        xData.push(item.物资名称)
        yData.push(item.数量)
      })
      let myChart = echarts.init(this.$refs.countChart);
      myChart.off('click');
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: "#FFF",
          borderColor: "rgba(147, 235, 248, 0)",
          textStyle: {
            color: "#000",
          },
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            // interval: 0,
            color: '#00FFFF'
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: xData
        },
        yAxis: {
          name: "物资数量：个",
          nameTextStyle: {
            color: "#C8EEFF",
            fontSize: 10,
          },
          type: 'value',
          axisLabel: {
            color: '#C8EEFF'
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#C8EEFF',
              type: 'dashed'
            }
          },
        },
        series: [
          {
            type: 'bar',
            stack: '总量',
            barWidth: '20',
            label: {
              show: false,
              position: 'insideRight'
            },
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: "#00B2FF" },
                    { offset: 1, color: "#032F9F" },
                  ]
                )
              }
            },
            data: yData
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        _that.getTable(area, type, params.name)
      });
    },
    async getTable(area, type, name) {
      await axios.get(`http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjwz_tb_fc_wzlx_wzmx?area=${area}&type=${type}&name=${name}`)
        .then(res => {
          this.tableData = res.data.data
        }).catch(err => {
          console.log(err);
        })
    },
  },
  mounted() {
    this.timeAction();
    this.getList();
    this.$nextTick(function () {
      var myEvent = new Event("resize");
      window.dispatchEvent(myEvent);
    });
  },
  beforeDestroy() {
  },
};
</script>
<style scoped lang="scss">
.MaterialList {
  width: 100%;
  height: 996px;
  // height: 100%;
  background: radial-gradient(78.56% 78.56% at 50% 21.44%, rgba(0, 48, 220, 0.10) 0%, rgba(0, 0, 0, 0.00) 100%), #121212;
  overflow: hidden;
  color: #FFF;
  font-style: normal;
  font-family: "Source Han Sans CN";
  padding: 20px;

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .titles {
    height: 20px;
    color: #0FF;
    font-family: "Alibaba PuHuiTi";
    font-size: 18px;
    font-weight: 900;
    line-height: 20px;
  }

  .top {
    // width: 1663px;
    width: (1663 / 1714) * 100%;
    height: 477px;
    margin: 20px auto 18px;

    .top_left {
      width: (1122 / 1663) * 100%;
      // width: 1122px;
      height: 477px;

      .statistics {
        width: 100%;
        // width: 1122px;
        height: 163px;
        border-radius: 8px;
        border: 1px solid #68C9FF;
        background: radial-gradient(118.91% 72.65% at 19.71% 57.81%, rgba(34, 85, 151, 0.20) 0%, rgba(34, 85, 151, 0.04) 39.5%), linear-gradient(91deg, rgba(34, 85, 151, 0.10) -59.26%, rgba(34, 85, 151, 0.02) 62.48%), rgba(104, 201, 255, 0.05);
        box-shadow: 0px 4px 4px 0px rgba(104, 201, 255, 0.15) inset;
        padding: 18px;

        .titles {

          &>div:nth-child(2) {
            margin-right: 74px;
            font-family: "Source Han Sans CN";
            font-size: 12.5px;
            font-weight: 700;
          }
        }

        .factoryList {
          margin-top: 23px;
          height: 84px;
          padding: 0 35px;

          &>div {
            width: (250 / 1122) * 100%;
            // width: 225px;
            height: 84px;
            display: flex;
            justify-content: space-between;
            padding: 12px 20px;

            .icon {
              width: 51.6px;
              height: 51.6px;
            }

            .box {
              width: (160/ 250) * 100%;
              height: 62px;
              color: #C8EEFF;
              font-family: "Alibaba PuHuiTi";
              font-size: 16px;
              font-weight: 900;
              line-height: 21.5px;

              &>div:nth-child(2) {
                height: 35px;
                line-height: 35px;
                font-weight: 400;
              }

              span {
                color: #05FFFF;
                text-shadow: 0px 0px 4px rgba(0, 237, 246, 0.51);
                font-family: Orbitron;
                font-size: 32.25px;
                margin-right: 4px;
                font-weight: 900;
              }
            }

            &:hover {
              cursor: pointer;
            }
          }

          .active {
            border-radius: 20px;
            border: 1px solid #CDFF05;

            .box {
              color: #CDFF05;

              span {
                color: #CDFF05;
                text-shadow: 0px 0px 4px rgba(0, 237, 246, 0.51);
              }
            }
          }
        }
      }

      .count {
        margin-top: 11px;
        width: 100%;
        height: 303px;

        &>div {
          border-radius: 8px;
          border: 1px solid #68C9FF;
          background: radial-gradient(118.91% 72.65% at 19.71% 57.81%, rgba(34, 85, 151, 0.20) 0%, rgba(34, 85, 151, 0.04) 39.5%), linear-gradient(91deg, rgba(34, 85, 151, 0.10) -59.26%, rgba(34, 85, 151, 0.02) 62.48%), rgba(104, 201, 255, 0.05);
          box-shadow: 0px 4px 4px 0px rgba(104, 201, 255, 0.15) inset;
          padding: 19px 18px;
          height: 303px;

          &:nth-child(1) {
            width: (380 / 1122) * 100%;
            position: relative;
          }

          &:nth-child(2) {
            width: (728 / 1122) * 100%;
          }

          .img {
            position: absolute;
            left: 106px;
            top: 91px;
            width: (130 / 380) * 100%;
            height: (130 / 303) * 100%;
            background: url('~@/assets/images/救援物资/5.png');
            // background-color: pink;
            background-size: 100% 100%;
          }

          .chart {
            margin: 15px auto 0;
            width: (320 / 380) * 100%;
            height: 225px;
          }

          .charts {
            margin: 10px auto 0;
            width: 680px;
            height: 230px;
          }
        }
      }
    }

    .top_right {
      width: 524px;
      width: (524 / 1663) * 100%;
      height: 477px;
      border-radius: 8px;
      border: 1px solid #68C9FF;
      background: radial-gradient(118.91% 72.65% at 19.71% 57.81%, rgba(34, 85, 151, 0.20) 0%, rgba(34, 85, 151, 0.04) 39.5%), linear-gradient(91deg, rgba(34, 85, 151, 0.10) -59.26%, rgba(34, 85, 151, 0.02) 62.48%), rgba(104, 201, 255, 0.05);
      box-shadow: 0px 4px 4px 0px rgba(104, 201, 255, 0.15) inset;
      padding: 20px 18px;

      .titles {
        margin-bottom: 16px;
      }

      .scrapList {
        margin: 0 auto;
        width: (500 / 524) * 100%;
        height: 396px;
        overflow-x: hidden;
        overflow-y: auto;

        .scrap {
          width: 100%;
          // width: 473px;
          height: 120px;
          margin-bottom: 29.5px;

          .List {
            width: 100%;
            height: 90px;

            .List_1 {
              width: 100%;
              height: 16px;
              line-height: 16px;
              padding: 0 20px;
              color: #C8EEFF;
              font-size: 15px;
              font-weight: 700;

              &>div:nth-child(2) {
                font-size: 12px;
                font-weight: 400;

                span {
                  color: #05FFFF;
                  font-family: DIN;
                  font-size: 17px;
                  font-weight: 700;
                }
              }
            }

            .List_2 {
              margin-top: 12px;
              width: 100%;
              height: 12px;
              line-height: 12px;
              padding: 0 20px;
              color: rgba(200, 255, 255, 0.80);
              font-size: 12px;
              font-weight: 400;

              span {
                color: #0FF;
                font-weight: 700;
              }
            }

            .List_3 {
              margin-top: 16px;
              padding: 0 20px;
              height: 20px;
              line-height: 15px;

              .bar {
                margin-top: 4px;
                border-radius: 6.45px;
                background: linear-gradient(90deg, rgba(6, 113, 255, 0.70) 0%, rgba(4, 68, 153, 0.70) 100%);
                box-shadow: 0px 4px 4px 0px rgba(5, 82, 184, 0.26);
                width: (440 / 500) * 100%;
                // width: 382px;
                height: 12px;
                position: relative;

                .bars {
                  height: 12px;
                  border-radius: 6.45px 0 0 6.45px;
                  background: linear-gradient(180deg, #05FFFF 0%, #1192C2 100%);
                  box-shadow: 0px 0px 4px 0px rgba(0, 237, 246, 0.51);
                }

                .block {
                  position: absolute;
                  width: 4px;
                  height: 20px;
                  top: -4px;
                  background-color: #E3FFC8;
                  border-radius: 3px;
                }

                .days {
                  width: 50px;
                  height: 12px;
                  position: absolute;
                  top: 21px;
                  color: #C8EEFF;
                  font-size: 10px;
                  font-weight: 400;
                  line-height: 12px;

                  span {
                    color: #0FF;
                    font-family: DIN;
                    font-size: 15px;
                    font-weight: 700;
                  }
                }
              }

              .count {
                color: #05FFFF;
                font-family: DIN;
                font-size: 17px;
                font-weight: 700;
              }
            }
          }

          .Line {
            margin: 29.5px auto 0;
            width: 90%;
            height: 1px;
            background-color: #C8EEFF;
          }

          &:last-child {
            margin-bottom: 0;
            height: 92px;
          }
        }

        &::-webkit-scrollbar-track {
          background: rgba(0, 255, 255, 0.20);
        }

        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
          opacity: 0.5;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #00FFFF;
        }
      }

    }
  }

  .bottom {
    margin: 0 auto;
    width: (1663 / 1714) * 100%;
    // width: 1663px;
    height: 430px;
    border-radius: 8px;
    border: 1px solid #68C9FF;
    background: radial-gradient(118.91% 72.65% at 19.71% 57.81%, rgba(34, 85, 151, 0.20) 0%, rgba(34, 85, 151, 0.04) 39.5%), linear-gradient(91deg, rgba(34, 85, 151, 0.10) -59.26%, rgba(34, 85, 151, 0.02) 62.48%), rgba(104, 201, 255, 0.05);
    box-shadow: 0px 4px 4px 0px rgba(104, 201, 255, 0.15) inset;
    padding: 16px 18px;

    .table {
      margin-top: 10px;
      width: (1627 / 1663) * 100%;
      // width: 1627px;
      height: 365px;
    }
  }
}

::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border: 0px;
  color: #FFF;
  font-size: 13px;
}

::v-deep .el-table th {
  padding: 0;
  height: 36px !important;
  line-height: 36px;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 36px;
}

::v-deep .el-table .cell {
  padding: 8px 0 !important;
}

::v-deep .el-table__header-wrapper {
  background: linear-gradient(180deg, rgba(55, 131, 226, 0.03) 0%, rgba(77, 146, 255, 0.30) 100%);
  border: 2px solid rgba(41, 123, 225, 0.10);
  border-radius: 4px;
}

::v-deep .el-table__header-wrapper th {
  color: #00FFFF;
  font-size: 13px;
  font-weight: 700;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  border-bottom: 1px solid #C8EEFF !important;
}

// ::v-deep .el-table tr:nth-child(odd) {
//   // background-color: rgba(94, 110, 186, 0.3) !important;
//   background-color: transparent !important;
// }

//自定义斑马线和鼠标移入样式
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  // background-color: transparent !important;
  background: rgba(0, 29, 69, 0.50) !important;
}

// ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
//   // background-color: transparent !important;
//   background: rgba(0, 29, 69, 0.50) !important;
// }

.el-table::before {
  height: 0px;
}

// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 255, 255, 0.20);
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #00FFFF;
}
</style>
